
<template>
  <div class="zhu" v-for="sp in $store.state.products" :key="sp.id">
    <div v-if="sp.id === productid">
      <img style="width:410px;height:450px;" :src="sp.photo">

      <div class="card">
        <div class="body shadow">
          <div style="color:red">价格：￥{{ sp.price }}
          </div>
        </div>
      </div>

      <div class="card">
        <div class=" body shadow">
          <div>店铺名：{{ shopname }}
          </div>
        </div>
      </div>

      <div class="card">
        <div class=" body shadow">
          <div>店铺地址：{{ shopaddress }}
          </div>
        </div>
      </div>

      <div class="card">
        <div class=" body shadow">
          <div>店铺电话：{{ shopphone }}
          </div>
        </div>
      </div>
      <button @click="gotoshop" type="submit" class="btn btn-primary">立即进店</button>
      <button v-if="sp.inventory <= 0" type="submit" class="btn btn-primary" style="background-color: red;">已售罄</button>
      <button v-else @click="buyproduct(sp.price, sp.productname, sp.id)" type="submit"
        class="btn btn-primary">立即购买</button>

    </div>
  </div>
</template>
    
<script>
import { useRoute } from 'vue-router';
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import router from '@/router/index';
export default {
  name: 'DisPlay',
  setup() {

    let route = useRoute();
    let store = useStore();
    let shopname = ref("");
    let shopaddress = ref("");
    let shopphone = ref("");
    let shopid = ref(0);
    let shop_name = ref("");
    let productid = parseInt(route.params.id);
    store.dispatch("getproductinfo");
    $.ajax({
      url: 'http://8.134.248.229:10085/shop/info/',
      type: "get",
      data: { productid: productid, },
      headers: {
        Authorization: "Bearer " + store.state.token,
      },
      success(resp) {
        shopname.value = resp.shopname;
        shopaddress.value = resp.shopaddress;
        shopphone.value = resp.shopphone;
        shopid.value = parseInt(resp.id);
        shop_name.value = resp.shopname;
      }
    });

    const gotoshop = () => {
      router.push({ name: 'shop_products', params: { id: shopid.value, name: shop_name.value } });
    }

    const buyproduct = (price, pruductname, productid) => {

      let flag = false;
      for (let i in store.state.products) {
        if (store.state.products[i].id === productid) {
          if (store.state.products[i].inventory > 0)
            store.state.products[i].inventory--;
          else {
            flag = true;
            break;
          }
        }
      }
      let date = new Date();
      let data = {
        productname: pruductname,
        shopid: shopid.value,
        userid: store.state.id,
        order_price: price,
        order_create: date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒",
      };

      if (!flag) {
        store.dispatch("create_order", data);
        // for(let i in store.state.products){
        //   if(store.state.products[i].id===productid){
        //     store.state.products[i].inventory--;
        //   }
        // }
        store.dispatch("inventoryminus", {
          id: productid,
        })
        router.push({ name: 'order' });
      }
    }
    return { productid, shopname, shopaddress, shopphone, gotoshop, buyproduct };
  }
}
</script>
    
<style scoped>
.zhu {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

button {
  width: 50%;
  background-color: lightgreen;
  border-color: orange;
}</style>